<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>add article</title>

    <style>
        * {
            /* margin: 0; */
            /* padding: 0; */
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }

        body {
            background: #262626;
        }

        .container {
            display: flex;
            padding: 6px;
            /* Full height of the viewport */
        }

        blockquote {
            /* background-color: rgb(222, 222, 224);
        border-left: 5px solid rgb(170, 170, 171); */
            font-style: italic;
            text-align: center;
            display: block;
            margin: 0 auto;
            width: 60%;
        }

        img {
            display: block;
            margin: 0 auto;
            width: 55%;
            border: 1px solid rgb(210, 208, 208);
        }

        #markdown-input,
        #html-output {
            color: #b0aeae;
            width: 50%;
            height: 95vh;
            overflow-y: auto;
            border: 2px solid darkorange;
            /* Include padding and border in the element's total width and height */
        }

        #markdown-input {
            margin-right: 10px;
            padding: 6px;
            font-size: 22px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
            /* Optional: space between the two columns */
        }

        #html-output {
            overflow: auto;
            font-size: 22px;
            /* Allow scrolling if content overflows */
        }

        #menu-bar button {
            font-size: 30px;
        }

        #menu-bar {
            /*position: fixed;*/
            /*top: 0;*/
            /*left: 0;*/
            width: 100%;
            background-color: #f5f5f5;
            padding: 2px;
            text-align: center;
            z-index: 9999;
        }
    </style>
</head>

<body class="bg-gray-100">


<div class="container">
    <div id="markdown-input" contenteditable="plaintext-only" spellcheck="false">
### markdown to html 互相转换教程 案例 (支持直接粘贴图片)

> 扫描二维码

以上方法可以帮助将 Markdown 格式的文本文件转换成 HTML，您可以根据自己的需求选择合适的方法。对于前端开发，可以使用 Marked.js 等 JavaScript 库；对于后端开发，可以使用 Python 的 markdown 模块或 Java 的 `Flexmark` 库。如果有进一步的问题或需要更详细的示例，请随时告知！
    </div>
    <div id="html-output">11</div>
</div>

<br><br>
<input id="article-title" style="padding: 12px; font-size: 28px; width: 100%; ">
<br><br>

<div id="menu-bar">
    <p>markdown to html 互相转换</p>
    <button onclick="insertTextAtCursor('要插入的文本')">插入文本</button>
    <button onclick="log_article()"> 控制台输出</button>
    <button onclick="save_article()"> 保存</button>
    <h2><a href="/articles"  target="_blank">文章列表</a></h2>
</div>

<br><br><br><br><br>

</body>

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/marked/3.0.6/marked.min.js"></script>
<script th:src="@{/static/js/paste-image.js}"></script>
<script>


    // 监听粘贴事件
    document.getElementById('markdown-input').addEventListener('input', convertMarkdown);

    function convertMarkdown() {
        const markdownText = document.getElementById('markdown-input').innerText;
        const htmlContent = marked.parse(markdownText);
        document.getElementById('html-output').innerHTML = htmlContent;
    }


    // 在光标处插入文本
    function insertTextAtCursor(text) {
        let editor = document.getElementById('markdown-input');
        if (editor) {
            // 获取当前光标位置
            let selection = window.getSelection();
            let range = selection.getRangeAt(0);

            // 创建一个文本节点包含要插入的文本
            let textNode = document.createTextNode(text);

            // 在光标位置插入文本节点
            range.insertNode(textNode);

            // 将光标移动到插入文本的末尾
            range.setStartAfter(textNode);
            range.collapse(true);

            // 更新选区和光标位置
            selection.removeAllRanges();
            selection.addRange(range);

            // 触发编辑区域的 input 事件，如果需要
            let inputEvent = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            editor.dispatchEvent(inputEvent);
        }
    }

    function log_article() {
        let markdownText = document.getElementById('markdown-input').innerText;
        console.log(markdownText);
    }

    function save_article() {
        let markdownText = document.getElementById('markdown-input').innerText;
        console.log(markdownText);
        let article_title = document.getElementById("article-title").value;
        let api_url = "/article/add";   // 如果是 django 后端一定需要加上 / 反斜杠
        let postObj = {
            title: article_title,
            content: markdownText
        };
        fetch(api_url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json',},
            body: JSON.stringify(postObj),
        })
            // .then(response => response.json())  // 解析响应为 json, 解析响应为 json, 无需再 JSON.parse() 解析
            .then(response => response.text())  // 解析响应为 文本
            .then(data => {
                console.log(data);
                alert(data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }


</script>

</html>


